<template>
	<view>
		<u-tabbar :value="value" activeColor="#333" inactiveColor="#c1c1c1" :border="false" @change="onChange">
			<u-tabbar-item :text="$t('tabbar.home')">
				<image class="tabImage" slot="inactive-icon" src="/static/tabbar/home.png"></image>
				<image class="tabImage_active" slot="active-icon" src="/static/tabbar/home_active.png"></image>
			</u-tabbar-item>
			<u-tabbar-item :text="$t('tabbar.subscribe')">
				<image class="tabImage" slot="inactive-icon" src="/static/tabbar/subscribe.png"></image>
				<image class="tabImage_active" slot="active-icon" src="/static/tabbar/subscribe_active.png"></image>
			</u-tabbar-item>
			<u-tabbar-item :text="$t('tabbar.order')">
				<image class="tabImage" slot="inactive-icon" src="/static/tabbar/order.png"></image>
				<image class="tabImage_active" slot="active-icon" src="/static/tabbar/order_active.png"></image>
			</u-tabbar-item>
			<u-tabbar-item :text="$t('tabbar.my')">
				<image class="tabImage" slot="inactive-icon" src="/static/tabbar/my.png"></image>
				<image class="tabImage_active" slot="active-icon" src="/static/tabbar/my_active.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {
			};
		},
		props: {
			value: {
				type: Number,
				default: 0
			}
		},
		created() {
			uni.hideTabBar()
		},
		methods: {
			onChange(e) {
				switch (e) {
					case 0:
						uni.switchTab({
							url: '/pages/home/index'
						})
						break;
					case 1:
						uni.switchTab({
							url: '/pages/subscribe/index'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/order/index'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/my/index'
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabImage_active,
	.tabImage {
		width: 40rpx;
		height: 40rpx;
	}
</style>
